<template>
	<view class="container">
			<swiper
				class="function-swiper"
				:current="currentSwiper"
				@change="swiperChange"
				:duration="300"
				:disable-touch="false"
				@touchstart="handleTouchStart"
				@touchmove="handleTouchMove"
				@touchend="handleTouchEnd"
			>
				<!-- 第一页功能 -->
				<swiper-item class="swiper-item">
					<view class="grid-container">
						<view class="grid-item" v-for="(item, index) in page1Functions" :key="index" @click="navigateTo(item.path)">
							<image class="grid-icon" :src="item.icon" mode="aspectFit"></image>
							<text class="grid-text">{{ item.name }}</text>
						</view>
					</view>
				</swiper-item>
	
				<!-- 第二页功能 -->
				<swiper-item class="swiper-item">
					<view class="grid-container">
						<view class="grid-item" v-for="(item, index) in page2Functions" :key="index" @click="navigateTo(item.path)">
							<image class="grid-icon" :src="item.icon" mode="aspectFit"></image>
							<text class="grid-text">{{ item.name }}</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
	
			<!-- 指示点 -->
			<view class="dots-container">
				<view
					class="dot"
					:class="{ active: currentSwiper === 0 }"
					@click="currentSwiper = 0"
				></view>
				<view
					class="dot"
					:class="{ active: currentSwiper === 1 }"
					@click="currentSwiper = 1"
				></view>
			</view>
		</view>
</template>

<script>
	export default {
		name:"FunctionModule",
		props:{
			page1Functions:{
				type:Array,
				default:() => []
			},
			page2Functions:{
				type:Array,
				default:() => []
			}
		},
		data() {
			return {
				currentSwiper: 0, // 当前显示的swiper页面索引
				startX: 0, // 触摸开始时的x坐标
				pageWidth: 0, // 屏幕宽度
			};
		},
		onLoad() {
				// 获取屏幕宽度
				uni.getSystemInfo({
					success: (res) => {
						this.pageWidth = res.windowWidth;
					}
				});
			},
			methods: {
				swiperChange(e) {
					this.currentSwiper = e.detail.current;
				},
				handleTouchStart(e) {
					this.startX = e.touches[0].clientX;
				},
				handleTouchMove(e) {
					// 如果你希望在滑动过程中禁止swiper的默认行为，可以尝试在这里阻止事件冒泡
					// 但对于swiper组件来说，它已经处理了大部分滑动逻辑，这里主要是为了记录滑动开始位置
				},
				handleTouchEnd(e) {
					const endX = e.changedTouches[0].clientX;
					const deltaX = endX - this.startX;
		
					const threshold = this.pageWidth / 2; // 滑动距离超过屏幕宽度的一半
		
					if (deltaX > threshold && this.currentSwiper > 0) {
						// 向右滑动超过一半，且不是第一页，则切换到上一页
						this.currentSwiper--;
					} else if (deltaX < -threshold && this.currentSwiper < 1) { // 假设只有两页
						// 向左滑动超过一半，且不是最后一页，则切换到下一页
						this.currentSwiper++;
					}
					// 如果滑动距离未超过一半，currentSwiper会保持不变，swiper会自动回弹到当前页
				},
				navigateTo(path) {
					if(path === 'goSelect'){
						this.goSelect()
					} else if(path === 'goQa') {
						this.goQa()
					} else if(path === 'goQuestionnaire') {
						this.goQuestionnaire()
					} else if(path === 'goReview') {
						this.goReview()
					} else if(path === 'goMedicine') {
						this.goMedicine()
					} else if(path === 'goEducation') {
						this.goEducation()
					}
				},
				goSelect() {
				  const authority = uni.getStorageSync('authority');
				  const hasRegisteredInfo = uni.getStorageSync('hasRegisteredInfo')
				  console.log(hasRegisteredInfo)
				  if(hasRegisteredInfo === 0) {
				    uni.navigateTo({
				      url:'/pages/changePersonalInfo/changePersonalInfo'
				    })
				  } else {
				    if (authority === '造口护理') {
				      uni.navigateTo({
				        url: '/pages/indexM/indexM'
				      });
				    } else if (authority === '前列腺癌') {
				      uni.navigateTo({
				        url: '/pages/indexQ/indexQ'
				      });
				    }
				  }
				},
				
				// 智能问答跳转 - 沿用原有逻辑
				goQa() {
				  const access = uni.getStorageSync('access');
				  if (access === '1') {
				    uni.navigateTo({
				      url: '/pages/smartQa/smartQa'
				    });
				  } else {
				    uni.showToast({
				      title: '请先完成信息填报',
				      icon: 'none'
				    });
				  }
				},
				goQuestionnaire() {
				uni.navigateTo({
				  url: '/pages/questionnaire/questionnaire'
				});
				},
				
				goReview() {
				uni.navigateTo({
				  url: '/pages/setReview/setReview'
				});
				},
				goMedicine() {
					uni.navigateTo({
					  url: '/pages/setMedicine/setMedicine'
					});
				},
				goEducation() {
				  console.log('点击了我的收藏，准备跳转'); // 新增日志
				  uni.navigateTo({
				    url: '/pages/education/education',
				    success: () => {
				      console.log('跳转成功'); // 成功日志
				    },
				    fail: (err) => {
				      console.error('跳转失败原因:', err); // 失败日志（关键！）
				      uni.showToast({ title: '跳转失败', icon: 'none' });
				    }
				  });
				},
			}
	}
</script>

<style lang="scss" scoped>
.container {
	padding: 20rpx;
	background-color: #fff;
	border-radius: 10rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	margin: 20rpx;
}

.function-swiper {
	height: 380rpx; /* 根据你的内容调整高度 */
}

.swiper-item {
	display: flex;
	justify-content: center;
	align-items: center;
}

.grid-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* 每行4个 */
	grid-gap: 20rpx;
	width: 100%;
	padding: 0 20rpx; /* 内边距 */
	box-sizing: border-box;
}

.grid-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10rpx;
	border-radius: 8rpx;
	text-align: center;
}

.grid-icon {
	width: 80rpx;
	height: 80rpx;
	margin-bottom: 10rpx;
}

.grid-text {
	font-size: 24rpx;
	color: #333;
}

.dots-container {
	display: flex;
	justify-content: center;
	margin-top: 20rpx;
}

.dot {
	width: 16rpx;
	height: 16rpx;
	background-color: #ccc;
	border-radius: 50%;
	margin: 0 8rpx;
	transition: background-color 0.3s;
}

.dot.active {
	background-color: #007aff; /* 激活状态的颜色 */
}
</style>